<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "clockIcon";
            src: url(../../font/clockicons.woff2);
        }
        .warp {
            border: 1px solid #333;
            border-bottom: 0;
            width: 350px;
            height: 150px;
            /* margin: 0 auto; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            line-height: 50px;
        }
        .font {
            font-size: 20px;
        }

        #time {
            font-family: "clockIcon";
        }
        #date {
            margin-top: 20px;
            font-size: 18px;
        }
        li {
            list-style: none;
            width: 50px;
            text-align: center;
        }
        #box {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-wrap: wrap;
            width: 350px;
            height: 350px;
            border: 1px solid #333;
            /* margin: 0 auto; */
        }
    </style>
</head>

<body>
    <div class="warp">
        <span class="font">现在的时间</span>
        <div id="time">00:00:00</div>
        <div id="date">2021年8月21日</div>
    </div>
    <div id="box"></div>

</body>
<script>
    var time = document.getElementById("time");
    var dates = document.getElementById("date");
    nowTime();
    nowDate();
    setInterval(nowTime, 1000);
    setInterval(nowDate, 1000);
    function nowTime() {
        var date = new Date();
        var ms = date.getTime();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        time.innerText = `${hour}:${beauty(minute)}:${beauty(second)}`;
    }
    function nowDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        dates.innerText = `${year}年${beauty(month)}月${beauty(day)}日`;
    }
    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }
</script>
<script>
    //1、封装一个函数, 传入一个日期, 返回该月的第一天 是星期几 ? (星期天)
    function week(day) {
        var date = new Date(day); //获取传入的日期
        date.setDate(1); //将日期改为该月的第一天
        var week = date.getDay(); //获取该日（该月的第一天）期是周几
        week = week == 0 ? 7 : week; //如果0则+7该为7（为星期天），因为默认星期天为0
        return week; //返回星期几
    }

    //2、封装一个函数, 传入一个日期, 返回该日期对应的上个月有多少天 ? (上个月)
    function beforeMonthDay(day) {
        var date = new Date(day); //获取传入的日期
        date.setDate(0); //将当月的号数改为0号（也就是上个月的最后一天），由此可以判断上个月有多少天
        var sum = date.getDate(); //再获取号数（几号）
        return sum;
    }

    //3、封装一个函数, 传入一个日期, 返回该日期对应的月有多少天 ? (当前月)
    function monthDay(day) {
        var date = new Date(day); //获取传入的日期
        var month = date.getMonth(); //获取传入日期的月份
        date.setMonth(month + 1); //将月份+1，默认月份是0-11
        date.setDate(0); //将当月的号数改为0号（也就是上个月的最后一天），由此可以判断上个月有多少天
        var sum = date.getDate(); //再获取号数（几号）
        return sum;
    }
</script>
<script>
    var box = document.getElementById("box");
    var day = "2021-8-22";
    var weeks = week(day); //获取该月第一天是周几
    var upDay = beforeMonthDay(day); //获取上个月有多少天
    var nowDay = monthDay(day); //获取本月有多少天
    var lastStar = upDay - (weeks - 1) + 1; //上个月的起始值
    var downEnd = 42 - (weeks - 1) - nowDay; //下个月的终止值
    // var str = "<li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>";
    var str = `<li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>`;

    //获取上个月的号数
    var arr = [];
    for (var i = lastStar; i <= upDay; i++) {
        arr.push("<li>" + i + "</li>");
    }
    var str1 = arr.join("");

    //获取本月的号数
    var brr = [];
    for (var i = 1; i <= nowDay; i++) {
        brr.push("<li>" + i + "</li>");
    }
    var str2 = brr.join("");

    //获取下个月的号数
    var crr = [];
    for (var i = 1; i <= downEnd; i++) {
        crr.push("<li>" + i + "</li>");
    }
    var str3 = crr.join("");
    box.innerHTML = str + str1 + str2 + str3;
</script>

</html>